<template>
  <div id="canvas" ref='can'>


  </div>
</template>

<script>
import axios from 'axios'
import messageComp from '../../components/banner/banner.vue'
import * as THREE from "three"

      const WIDTH = 400;
      const HEIGHT = 300;
      // Set some camera attributes.
      const VIEW_ANGLE = 45;
      const ASPECT = WIDTH / HEIGHT;
      const NEAR = 0.1;
      const FAR = 10000;
      // Get the DOM element to attach to

export default {
  data () {
   return {
     isShow:false,
     ds:[],
     message:'nihao'
   }
  },
  components: {
       messageComp: messageComp,
   },
  created:function (){
     let _this=this;
     axios.get("/index").then((res)=>{
      //  console.log(res.data);
             _this.ds=res.data;
            //  console.log(_this.ds);
        })
    },
  methods:{
       toggle:function(){
        this.isShow = !this.isShow;
      },
      fun:function(){
        this.$router.push({path: "/regist"})
      },
      fun1:function(){
        this.$router.push({path: "/login"})
      }
   },
   mounted:function(){
     var container = document.createElement( 'div' );
     this.$refs.can.appendChild( container );
     var renderer,camera,scene,light;
     var width,height;
   function initThree(){
       width=window.innerWidth;
       height=window.innerHeight;
       renderer=new THREE.WebGLRenderer({
         antialias : true //开启抗锯齿
       });
       renderer.setSize(width,height);//设置画布大小
       renderer.setClearColor(0xEEEEEE);//设置画布背景颜色
       container.appendChild(renderer.domElement);//将画布追加到html文档中

   }


   function initCamera(){
       camera=new THREE.PerspectiveCamera(45,width/height,1,10000);
       camera.position.x=100;
       camera.position.y=100;
       camera.position.z=100;
       camera.up.x=0;
       camera.up.y=1;
       camera.up.z=0;
       camera.lookAt(0,0,0);
   }
   function initScene(){
       scene=new THREE.Scene();
   }

   function initLight(){
     light=new THREE.DirectionalLight(0xffffff,1);
     light.position.set(10,10,3);
     scene.add(light);
   }

   var sunMesh;//太阳
   function initSun(){
       var geometry=new THREE.SphereGeometry(10,28,22);//球体半径为10，经度切为28份，纬度切为22份（根据需要自行设置）
        var material = new THREE.MeshBasicMaterial({ color: 0x7777ff, wireframe: true });
       sunMesh=new THREE.Mesh(geometry,material);
       sunMesh.position.set(-100,-80,-200);//设置球体位置
       scene.add(sunMesh);//添加到场景中
   }
   var balls=[];
   function initball(){
     for(var i=2;i<3;i++){
       var geometry=new THREE.SphereGeometry(3+i/2,22,100);
       var material=new THREE.MeshLambertMaterial({color:getColor()})
       var ball=new THREE.Mesh(geometry,material);
       ball.position.set(100,-80,-200);
        balls.push(ball)
       scene.add(ball);

     }

   }
   function getColor(){
       //定义字符串变量colorValue存放可以构成十六进制颜色值的值
       var colorValue="0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
       //以","为分隔符，将colorValue字符串分割为字符数组["0","1",...,"f"]
       var colorArray = colorValue.split(",");
         var color="#";//定义一个存放十六进制颜色值的字符串变量，先将#存放进去
         //使用for循环语句生成剩余的六位十六进制值
         for(var i=0;i<6;i++){
             //colorArray[Math.floor(Math.random()*16)]随机取出
             // 由16个元素组成的colorArray的某一个值，然后将其加在color中，
             //字符串相加后，得出的仍是字符串
             color+=colorArray[Math.floor(Math.random()*16)];
         }
         return color;
   }
   var circles=[]
   function initCycle(){
     //用画二维图形的方式画圆
     for(var i=2;i<6;i++){
       var radius=10*i;//设置同心圆，只有半径不一样
       var geometry=new THREE.CircleGeometry(radius,10);//半径，分段数
       var material=new THREE.MeshBasicMaterial({color:0xB3DD,wireframe:true })
       var cycleMesh=new THREE.Mesh(geometry,material);
       cycleMesh.position.set(-100,-80,-200);
       cycleMesh.rotateX(Math.PI/2);//默认是绘制在xy平面的，所以这里要旋转下放到xz平面
       scene.add(cycleMesh);
       circles.push(radius)
     }
   }
   function initCycle2(){
     //用画线方式画圆
     for(var j=2;j<6;j++){
       var radius=10*j;
       var lineGeometry=new THREE.Geometry();
       for(var i=0;i<2*Math.PI;i+=Math.PI/30){
         lineGeometry.vertices.push(new THREE.Vector3(radius*Math.cos(i),0,radius*Math.sin(i),0))
       }
       var material=new THREE.LineBasicMaterial({color:0xffa500 })
       var cycleMesh=new THREE.Line(lineGeometry,material);
       cycleMesh.position.set(-100,-80,-200);
       scene.add(cycleMesh);
       circles.push(radius)
     }
   }

   var deg=Math.PI/2;

   function ballAnim(){
     deg+=1/6*Math.PI/180;//每次转动1/6度
     balls.forEach((ball,index)=>{
       var ballDeg=3*deg/(index+1);//根据索引值设置每个球体转动不同的角度
       ball.position.x=Math.sin(ballDeg)*circles[index];
       ball.position.z=Math.cos(ballDeg)*circles[index];
     })
   }
function initPoint(){
  //添加光源
     var point=new THREE.PointLight(0xffffff);
     point.position.set(0,0,100);//点光源位置
     scene.add(point);

     camera.position.z = 0;

     //绘制若干个点
     var starsGeometry = new THREE.Geometry();
     for ( var i = 0; i < 10000; i ++ ) {

         var star = new THREE.Vector3();//创建点并在下面设置点的位置
         star.x = THREE.Math.randFloatSpread(2500 );
         star.y = THREE.Math.randFloatSpread(2000 );
         star.z = THREE.Math.randFloatSpread( 2500 );

         starsGeometry.vertices.push( star )
     }

     var starsMaterial = new THREE.PointsMaterial( { color: 0x888888 } )
     var starField = new THREE.Points( starsGeometry, starsMaterial );
     scene.add( starField );
}
   function init(){
     initThree();
     initCamera();
     initScene();
     initLight();
     initSun();
     initball();
     // initPoint();
     // initCycle();
     initCycle2();
   }

   function anim(){
     ballAnim();
       sunMesh.rotation.y += 0.005;
     renderer.render( scene, camera );
     requestAnimationFrame(anim);
   }

   init()
   anim()
   }
}
</script>
<style lang="scss">
  #canvas{
    height: 100%;
    background-image: url("../../static/img/particle.png")
  }
</style>
